$(function () {
  var $mask = $('.mask');
  var $dialog = $('.dialog');
  var chart$ = echarts.init(document.getElementById('wenquanChart'));
  var isDraw = false;

  var data3 = [4000, 5000, 1800, 7000, 8800, 6500, 1900];
  var data4 = [5900, 3000, 7800, 4200, 6800, 4500, 3900];

  $('.report-list').on('click', '.wenquan-report', function () {
    !isDraw && drawChart()
    $mask.show();
    $dialog.show();
  });

  $('.dialog-close-button').click(function() {
    $dialog.hide();
    $mask.hide();
  })

  function drawChart() {
    isDraw = true;
    //柱图1
    var option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: ' rgba(0,255,255,0.2)',
        padding: 9,
        textStyle: {
          fontSize: 14,
          color: '#fff',
        },
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        extraCssText: 'box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);border-radius: 2px;',
      },
      legend: {
        show: true,
        right: '7%',
        top: '2%',
        orient: "horizontal",
        selectedMode: false,
        textStyle: {
          color: '#fff'
        },
        data: ['2016年', '2017年']
      },
      grid: {
        left: '3%',
        right: '7%',
        bottom: '10%',
        containLabel: true //grid 区域包含坐标轴的刻度标签。
      },
      xAxis: [{
        type: 'category',
        data: ['元旦', '春节', '清明节', '劳动节', '端午节', '中秋节', '国庆'],
        boundaryGap: ['10%', '20%'],
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(0,255,255,0.19)',
          }, //坐标轴在 grid 区域中的分隔线颜色
        },
        axisLabel: {
          textStyle: {
            color: '#9a9bae',
          } //刻度标签文字颜色
        }
      }],
      yAxis: [{
        type: 'value',
        splitNumber: 5,
        axisLabel: {
          textStyle: {
            color: '#9a9bae',
          } //刻度标签文字颜色
        },
        axisTick: {
          show: false
        }, //取消坐标中间刻度
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0,255,255,0.19)',
          }, //坐标轴在 grid 区域中的分隔线颜色
        },
      }],
      series: [{
          name: '2016年',
          type: 'bar',
          barWidth: '20%',
          itemStyle: {
            normal: {
              color: 'rgba(74,114,255,0.58)',
              borderColor: '#4A72FF'
            },
          },
          data: data3
        },
        {
          name: '2017年',
          type: 'bar',
          barWidth: '20%',
          itemStyle: {
            normal: {
              color: 'rgba(248,231,28,0.64)',
              borderColor: '#F8E71C'
            },
          },
          data: data4
        }
      ]
    };

    chart$.setOption(option)
  }
});
